import { Engine, Color3, DynamicTexture, FollowCamera, Camera, HemisphericLight, Vector3, Sprite, Scene, ArcRotateCamera, PointLight, StandardMaterial, Texture, ShaderMaterial, IAnimationKey, AssetsManager, MeshAssetTask, AbstractMesh, PickingInfo, Mesh, Animation, MeshBuilder } from 'babylonjs'
import 'babylonjs-loaders';
// @ts-ignore
import MeshWriter from "meshwriter";
import conf, { createText } from './textConf'

// 文本
export class Group {
  private dom: HTMLCanvasElement
  private engine: Engine
  private scene: Scene
  private camera: ArcRotateCamera

  constructor(dom: HTMLCanvasElement) {
    this.dom = dom
    this.engine = new Engine(this.dom, true)  // 设置引擎
    this.scene = new Scene(this.engine)   // 创建场景

    // 纵轴旋转45°
    this.camera = new ArcRotateCamera("Camera", Math.PI / 180 * 45, Math.PI / 180 * 45, 200, Vector3.Zero(), this.scene, true); // 创建相机
    // console.log(this.camera)
    this.camera.lowerBetaLimit = null as unknown as number
    this.camera.upperBetaLimit = null as unknown as number
    this.camera.lowerAlphaLimit = null as unknown as number
    this.camera.upperAlphaLimit = null as unknown as number
    this.camera.lowerRadiusLimit = null as unknown as number
    this.camera.upperRadiusLimit = null as unknown as number

    this.camera.lowerRadiusLimit = 30;   // 缩放最小距离
    this.camera.upperRadiusLimit = 3000; //限制相机距离焦点最远距离
    this.camera.target = new Vector3(10 + 15 * 20, 10, 10)
    this.camera.attachControl(this.dom, false)  // 把相机放到画布
    let that = this


    // 创建半球光
    const light = new HemisphericLight('light', new Vector3(10, 5, 5), this.scene);
    const x = Mesh.CreateLines('x', [Vector3.Zero(), new Vector3(1000, 0, 0)], this.scene)
    x.color = new Color3(1, 0, 0);
    const y = Mesh.CreateLines('y', [Vector3.Zero(), new Vector3(0, 1000, 0)], this.scene)
    y.color = new Color3(0, 1, 1);
    const z = Mesh.CreateLines('z', [Vector3.Zero(), new Vector3(0, 0, 1000)], this.scene)
    z.color = new Color3(1, 0, 1);

    const scale = 20
    for (let i = 0; i < 30; i++) {
      const box2 = Mesh.CreateBox(String(i), 20, this.scene)
      const m = new StandardMaterial(String(i), this.scene)
      m.diffuseColor = new Color3(Math.random(), Math.random(), Math.random())
      box2.material = m
      box2.position.set(10 + i * 20, 10, 10)


      const textWriter = createText(String(i + 1), this.scene, { scale }, {
        position: { y: 21 / scale, x: (10 + i * 20) / scale, z: 5 / scale },
        letterHeight: 10 / scale,
        letterThickness: 1 / scale,
        color: '#00000',
        anchor: 'center',
        colors: { diffuse: '#cccccc' }
      })
      const SPS = textWriter.getSPS()
      SPS.particles.forEach((particle: any, i: number) => {
        particle.rotation.x = Math.PI / 180 * 180
        particle.rotation.z = Math.PI / 180 * 180
        if (i == 1) {
          let position = SPS.particles[1].position
          SPS.particles[1].position = SPS.particles[0].position
          SPS.particles[0].position = position
        }
      });

      this.scene.registerBeforeRender(() => {
        SPS.setParticles();
      });
    }
    window.addEventListener('resize', () => {
      this.engine.resize();
    })
  }
  render() {
    // 引擎渲染场景
    this.engine.runRenderLoop(() => {
      this.scene.render()
    })
  }
}


